<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page isELIgnored="false" %>

<html>
<head>
    <title>我的订单</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <style>
        /* 导航栏样式 */
        .navbar {
            background-color: #f8f9fa;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }

        .logo {
            font-size: 1.5rem;
            font-weight: bold;
            color: #333;
            text-decoration: none;
        }

        .nav-links {
            display: flex;
            gap: 20px;
        }

        .nav-link {
            display: flex;
            align-items: center;
            gap: 5px;
            color: #333;
            text-decoration: none;
            font-size: 1rem;
            padding: 5px 10px;
            border-radius: 4px;
            transition: all 0.3s ease;
        }

        .nav-link:hover {
            background-color: #e9ecef;
            color: #007bff;
        }

        .nav-link i {
            font-size: 1.2rem;
        }

        /* 订单列表样式 */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .page-title {
            text-align: center;
            margin-bottom: 30px;
            color: #333;
        }

        .orders-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 30px;
        }

        .orders-table th, .orders-table td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        .orders-table th {
            background-color: #f8f9fa;
            font-weight: 600;
        }

        .orders-table tr:hover {
            background-color: #f5f5f5;
        }

        .order-status {
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 0.8rem;
            font-weight: 500;
        }

        .status-paid {
            background-color: #d4edda;
            color: #155724;
        }

        .status-pending {
            background-color: #fff3cd;
            color: #856404;
        }

        .status-cancelled {
            background-color: #f8d7da;
            color: #721c24;
        }

        .no-orders {
            text-align: center;
            padding: 50px;
            color: #6c757d;
            font-size: 1.2rem;
        }

        .action-btn {
            padding: 6px 12px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.9rem;
            transition: all 0.3s;
        }

        .view-btn {
            background-color: #17a2b8;
            color: white;
        }

        .view-btn:hover {
            background-color: #138496;
        }

        .cancel-btn {
            background-color: #dc3545;
            color: white;
            margin-left: 5px;
        }

        .cancel-btn:hover {
            background-color: #c82333;
        }

        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 20px;
            gap: 10px;
        }

        .page-link {
            padding: 5px 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            text-decoration: none;
            color: #333;
        }

        .page-link:hover {
            background-color: #f1f1f1;
        }

        .current-page {
            background-color: #007bff;
            color: white;
            border-color: #007bff;
        }
    </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar">
    <a href="${pageContext.request.contextPath}/student/home" class="logo">图书商城</a>
    <div class="nav-links">
        <a href="${pageContext.request.contextPath}/collection/list" class="nav-link">
            <i class="fas fa-user"></i>
            <span>个人中心</span>
        </a>
        <a href="${pageContext.request.contextPath}/order/list" class="nav-link">
            <i class="fas fa-file-alt"></i>
            <span>订单管理</span>
        </a>
        <a href="${pageContext.request.contextPath}/cart/list" class="nav-link">
            <i class="fas fa-shopping-cart"></i>
            <span>购物车</span>
        </a>
        <a href="${pageContext.request.contextPath}/collection/list" class="nav-link">
            <i class="fas fa-heart"></i>
            <span>我的收藏</span>
        </a>
    </div>
</nav>

<div class="container">
    <h1 class="page-title">我的订单</h1>

    <c:choose>
        <c:when test="${not empty orders}">
            <table class="orders-table">
                <thead>
                <tr>
                    <th>订单编号</th>
                    <th>商品名称</th>
                    <th>下单时间</th>
                    <th>支付金额</th>
                    <th>订单状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach items="${orders}" var="order">
                    <tr>
                        <td>${order.oid}</td>
                        <td>${order.gname}</td>
                        <td>${order.createtime}</td>
                        <td>¥${order.paymoney}</td>
                        <td>
                            <c:choose>
                                <c:when test="${order.paystatus eq 1}"> <!-- 假设1表示已支付 -->
                                    <span class="order-status status-paid">已支付</span>
                                </c:when>
                                <c:when test="${order.paystatus eq 0}"> <!-- 假设0表示待支付 -->
                                    <span class="order-status status-pending">待支付</span>
                                </c:when>
                                <c:otherwise>
                                    <span class="order-status">${order.paystatus}</span>
                                </c:otherwise>
                            </c:choose>
                        </td>
                        <td>
                            <button class="action-btn view-btn"
                                    onclick="window.location.href='${pageContext.request.contextPath}/orders/detail?oid=${order.oid}'">
                                查看详情
                            </button>
                            <c:if test="${order.paystatus eq 1}">
                                <button class="action-btn cancel-btn"
                                        onclick="cancelOrder('${order.oid}')">
                                    取消订单
                                </button>
                            </c:if>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>

            <!-- 分页 -->
            <div class="pagination">
                <c:if test="${currentPage > 1}">
                    <a href="${pageContext.request.contextPath}/order/list?page=${currentPage-1}" class="page-link">上一页</a>
                </c:if>
                <c:if test="${currentPage > 2}">
                    <a href="${pageContext.request.contextPath}/order/list?page=${currentPage-2}" class="page-link">${currentPage-2}</a>
                </c:if>
                <c:if test="${currentPage > 1}">
                    <a href="${pageContext.request.contextPath}/order/list?page=${currentPage-1}" class="page-link">${currentPage-1}</a>
                </c:if>
                <a href="${pageContext.request.contextPath}/order/list?page=${currentPage}" class="page-link current-page">${currentPage}</a>
                <c:if test="${totalPage > currentPage}">
                    <a href="${pageContext.request.contextPath}/order/list?page=${currentPage+1}" class="page-link">${currentPage+1}</a>
                </c:if>
                <c:if test="${totalPage > currentPage+1}">
                    <a href="${pageContext.request.contextPath}/order/list?page=${currentPage+2}" class="page-link">${currentPage+2}</a>
                </c:if>
                <c:if test="${totalPage > currentPage}">
                    <a href="${pageContext.request.contextPath}/order/list?page=${currentPage+1}" class="page-link">下一页</a>
                </c:if>
            </div>
        </c:when>
        <c:otherwise>
            <div class="no-orders">
                <i class="fas fa-box-open" style="font-size: 3rem; margin-bottom: 15px;"></i>
                <p>您还没有任何订单</p>
                <a href="${pageContext.request.contextPath}/student/home" style="color: #007bff; text-decoration: none;">去逛逛</a>
            </div>
        </c:otherwise>
    </c:choose>
</div>

<script>
    function cancelOrder(oid) {
        if(confirm('确定要取消此订单吗？')) {
            fetch('${pageContext.request.contextPath}/order/cancel?oid=' + oid, {
                method: 'POST'
            })
                .then(response => response.json())
                .then(data => {
                    if(data.success) {
                        alert('订单已取消');
                        window.location.reload();
                    } else {
                        alert(data.message || '取消订单失败');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('操作失败，请重试');
                });
        }
    }
</script>
</body>
</html>